
<template>
  <div>
    <Card title="农产品价格管理" ref="card">
      <a href="#" slot="extra" @click.prevent="SearchCommodity">刷新</a>
      <Button size="large" type="primary" icon="ios-add" v-on:click="AddCom">新增农产品</Button>
    </Card>
    <Modal :mask-closable="false"  v-model="modal2" width="500">
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>{{typeName}}</span>
      </p>
      <Form ref="formItem" :model="tempCom" :label-width="80" :rules="ruleValidate">
        <FormItem label="分类" prop="Type">
          <Select v-model="tempCom.Type">
            <Option :value="0">土地经营</Option>
            <Option :value="1">养殖</Option>
          </Select>
        </FormItem>
        <FormItem label="名称" prop="Name">
          <Input v-model="tempCom.Name"></Input>
        </FormItem>
        <FormItem label="价格" prop="Price">
          <Input v-model="tempCom.Price" type="number">
            <span slot="append">元</span>
          </Input>
        </FormItem>
        <FormItem label="单位" prop="Unit">
          <Input v-model="tempCom.Unit"></Input>
        </FormItem>
      </Form>

      <div slot="footer">
        <Button type="primary" :loading="loadSave" size="large" @click="SaveCommodity">保存</Button>
      </div>
    </Modal>

    <Table
      class="margin-top-10"
      border
      :columns="tableTitle"
      :data="tableData"
      ref="table"
      :height="tableHeight"
    ></Table>
  </div>
</template>
<script>
import { Message, Modal } from "view-design";
import { getToken, baseUrl } from "@/libs/util";
import { SearchCommodity, SaveCommodity, DeleteCommodity } from "@/api/dbdata";
const validateSequence = (rule, value, callback) => {
  let regNum = /^[0-9]+.?[0-9]*$/;
  if (value === "") {
    callback(new Error("不能为空"));
  } else if (!regNum.test(value)) {
    callback(new Error("不能为负数"));
  } else {
    callback();
  }
};
export default {
  name: "commodity",
  data() {
    return {
      loadSave: false,
      tableHeight: 450,
      modal2: false,
      tableTitle: [
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    this.tempCom = params.row;
                    this.typeName = "修改农产品";

                    this.modal2 = true;
                  }
                }
              },
              "修改"
            );
          }
        },
        {
          title: "名称",
          key: "Name",
          align: "center",
          width: 200
        },
        {
          title: "价格",
          key: "Price",
          align: "center",
          width: 200
        },
        {
          title: "单位",
          align: "center",
          key: "Unit",
          width: 200
        },
        {
          title: "分类",
          align: "center",
          key: "Type",
          width: 200,
          render: (h, params) => {
            return h("span", {}, this.getComType(params.row.Type));
          }
        },
        {
          title: " "
        }
      ],
      tableData: [],
      typeName: "新增农产品",
      tempCom: {
        Gid: "",
        Name: "",
        Price: null,
        Unit: "",
        Type: 0
      },
      ruleValidate: {
        Type: [
          {
            type: "number",
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ],
        Name: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Unit: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Price: [
          { required: true, validator: validateSequence, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    clearCom() {
      this.typeName = "新增农产品";
      this.tempCom = {
        Gid: "",
        Name: "",
        Price: null,
        Unit: "",
        Type: 0
      };
    },
    AddCom() {
      this.clearCom();
      this.modal2 = true;
    },
    SearchCommodity() {
      let vm = this;
      SearchCommodity().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.tableData = data.Data;
        } else {
          Message.error(data.Message);
        }
      });
    },
    SaveCommodity() {
      let vm = this;
      this.$refs["formItem"].validate(valid => {
        if (valid) {
          vm.loadSave = true;
          SaveCommodity(this.tempCom).then(res => {
            vm.loadSave = false;
            const data = res.data;
            if (data.Type == 1) {
              vm.modal2 = false;
              vm.clearCom();
              vm.SearchCommodity();
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
        }
      });
    },
    getComType(value) {
      // if (value == 0) {
      //   return "粮油类";
      // } else if (value == 1) {
      //   return "瓜菜类";
      // } else if (value == 2) {
      //   return "果品类";
      // } else if (value == 3) {
      //   return "畜禽类";
      // } else if (value == 4) {
      //   return "水产品";
      // } else {
      //   return "";
      // }
      if (value == 0) {
        return "土地经营";
      } else if (value == 1) {
        return "养殖";
      } else {
        return "";
      }
    }
  },
  created() {},
  mounted() {
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.tableHeight = window.innerHeight - cardHeight - 160;
    this.SearchCommodity();
  }
};
</script>
